<template>
	<div class="scroll">
		<h3>
			游侠<br />攻略
		</h3>
		<ul :class="{anima}">
			<li v-for="item in scrollList" :key="item.id">
				<span></span>{{item.title}}
			</li>
			
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Scroll',
		props:['propsscroll'],
		data(){
			return{
				anima:false,
				scrollList : [

				]
			}
		},
		watch:{
			propsscroll(){
				this.scrollList = this.propsscroll
			}
		},
		mounted(){
			setInterval( this.showList , 2000 );
			// setTimeout( this.showList , 2000 );
		},
		methods:{
			//每隔两秒，数据向上滚动一条
			//2秒之内，将移除的数据剪到数组的最后一条；animationTop恢复成false[才能保证下一次执行滚动的时候有效果]
			showList(){
				//每隔2秒，将当前的第一条数据移出0.67rem
				this.anima=true
				//在2秒之间，执行：500毫秒之后;将当前数组的第一条数据添加到数组的末尾
				setTimeout( ()=>{
					this.scrollList.push(this.scrollList[0]);
					//将当前已经移出的第一条数据，删除
					this.scrollList.shift();
					//动画停止,等待下一次播放
					this.anima = false;
				},500)
			}
		}
		
	}
</script>

<style scoped>
	/* 动画样式 */
	.scroll .anima{
		margin-top: -0.66rem;
		height: 2.17rem;
		transition: all 0.5s;
	}
	
	.scroll{
		width: 100%;
		height: 1.5rem;
		overflow: hidden;
		/* 渐变是发生在背景图片上的样式 */
		background-image: linear-gradient(#fbffaf,#ffffed);
	}
	.scroll h3{
		height: 1.5rem;
		width: 15%;
		font-size: 0.5rem;
		float: left;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: gold;
		font-style: italic;		/* 斜体 */
		font-weight: bold;
	}
	.scroll ul{
		float: left;
		width: 80%;
		margin-left: 0.4rem;
		height: 1.5rem;
	}
	/* 设置省略号【3个样式同时进行】;行高【控制到每次只能看到两条数据】 */
	.scroll ul li{
		text-overflow: ellipsis;
		white-space: nowrap;     /* 终止换行 */
		overflow: hidden;
		font-size: 0.3rem;
		line-height: 0.67rem;
	}
	.scroll ul li span{
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		border-radius: 0.1rem;
		background-color: goldenrod;
		margin-right: 0.2rem;
	}
</style>
